<template>
  <view>
    <kk-container
      ref="kkContainerRef"
      title="我的答疑"
      :isShowHeader="true"
      :showPageLoading="pageLoadingList[tabIndex]"
      @handlerRefresh="handlerRefresh"
      @handlerReachBottom="handlerReachBottom"
      @handlerScroll="handlerScroll"
      :loadMoreStatus="loadMoreStatusList[tabIndex]"
    >
      <template v-slot:expand>
        <view class="topTab">
          <up-tabs
            :list="tabs"
            lineHeight="3"
            lineColor="#126EFE"
            :current="tabIndex"
            :activeStyle="{
              color: '#126EFE',
              fontWeight: '500',
              fontSize: '17px',
            }"
            :inactiveStyle="{
              color: '#666666',
              fontWeight: '400',
              fontSize: '15px',
            }"
            itemStyle="padding-left: 15px; padding-right: 16px; height: 44px;"
            @click="tabsClick"
          >
          </up-tabs>
        </view>
      </template>
      <view
        class="recordContent"
        :class="swiperItemClass(index)"
        :style="{
          background: isShowNoData ? 'transparent' : '#FFFFFF',
          height: isShowNoData ? `calc(100vh - 400rpx)` : 'auto',
        }"
      >
        <kk-no-data v-if="isShowNoData" />
        <RecordItem
          v-else
          v-for="(item, index) in currentList"
          :key="index"
          :data="item"
          :status="tabs[tabIndex].type"
          :isLast="index === currentList.length - 1"
        />
      </view>
      <!-- <view style="margin-top: 24rpx">
      <swiper
        class="swiper"
        :style="{ height: swiperHeight }"
        :current="tabIndex"
        @change="handleSwiperChange"
      >
        <swiper-item
          class="swiper-item"
          v-for="(_, index) in tabs"
          :key="index"
        >
        </swiper-item>
      </swiper>
    </view> -->
    </kk-container>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, computed } from "vue";
import { getMyAnswerRecordList } from "@/api/answer/index";

import RecordItem from "./components/recordItem.vue";
import { onUnmounted } from "vue";
import { nextTick } from "vue";

const tabs = ref([
  {
    name: "未回复",
    type: 1,
    count: 0,
  },
  {
    name: "追问未回复",
    type: 2,
    count: 0,
  },
  {
    name: "已回复",
    type: 3,
    count: 0,
  },
  {
    name: "已完成",
    type: 4,
    count: 0,
  },
]);

const systemInfoSync = uni.getSystemInfoSync();
const screenHeight = systemInfoSync.screenHeight;
const statusBarHeight = systemInfoSync.statusBarHeight as number;
const swiperItemMinHeight = screenHeight - statusBarHeight - 52 - 44;
const pageSize = ref(10);
const kkContainerRef = ref();
const tabIndex = ref(0);
const swiperItemHeight = ref([
  swiperItemMinHeight,
  swiperItemMinHeight,
  swiperItemMinHeight,
  swiperItemMinHeight,
]);
const scrollTopList = ref([0, 0, 0, 0]);
const pageLoadingList = ref([true, true, true, true]);
const requestComplete = ref([false, false, false, false]);
const tabData = ref({ 0: [], 1: [], 2: [], 3: [] });
const pagesList = ref([1, 1, 1, 1]); // 分页信息
const totalList = ref([0, 0, 0, 0]); // 总数量信息
const loadMoreStatusList = ref(["", "", "", ""]);
const timer = ref();

onLoad((options) => {
  getList(1);
});

const currentList = computed(() => {
  return tabData.value[`${tabIndex.value}`];
});

const isShowNoData = computed(() => {
  if (
    requestComplete.value[`${tabIndex.value}`] &&
    tabData.value[`${tabIndex.value}`].length === 0
  ) {
    return true;
  }
  return false;
});

// const swiperHeight = computed(() => {
//   return `${swiperItemHeight.value[tabIndex.value]}px`;
// });

const swiperItemClass = (index: Number) => {
  return `swiperItemClass${index}`;
};

// const getCurrentSwiperItemHeight = (index: Number) => {
//   const currentClass = `.swiperItemClass${index}`;
//   uni
//     .createSelectorQuery()
//     .select(currentClass)
//     .boundingClientRect((rect) => {
//       if (rect && rect.height > 0) {
//         swiperItemHeight.value[index] = rect.height || 0;
//       }
//     })
//     .exec();
// };

// tab点击
const tabsClick = (item: any) => {
  tabIndex.value = item.index;
  if (tabData.value[`${tabIndex.value}`].length === 0) {
    getList(pagesList.value[tabIndex.value]);
  }
  if (kkContainerRef) {
    kkContainerRef.value.setScrollTop(scrollTopList.value[tabIndex.value]);
  }
};

// const handleSwiperChange = (item: any) => {
//   if (item && item.detail) {
//     tabIndex.value = item.detail.current;
//     if (tabData.value[`${tabIndex.value}`].length === 0) {
//       loadMoreStatus.value = "";
//       getList(pagesList.value[tabIndex.value]);
//     }
//     if (kkContainerRef) {
//       kkContainerRef.value.setScrollTop(scrollTopList.value[tabIndex.value]);
//     }
//   }
// };

const getList = async (page: Number) => {
  if (pagesList.value[tabIndex.value] === 1) {
  }
  const param = {
    status: tabs.value[tabIndex.value].type,
    page: page,
    pageSize: pageSize.value,
  };
  const data = (await getMyAnswerRecordList(param).catch(() => {})) as any;
  requestComplete.value[`${tabIndex.value}`] = true;
  pageLoadingList.value[`${tabIndex.value}`] = false;
  if (data && Number(data.code) === 10000 && data.data) {
    pagesList.value[tabIndex.value] = page;
    if (pagesList.value[tabIndex.value] === 1) {
      tabData.value[`${tabIndex.value}`] = data.data.list || [];
    } else {
      tabData.value[`${tabIndex.value}`] = tabData.value[
        `${tabIndex.value}`
      ].concat(data.data.list || []);
    }
    totalList.value[`${tabIndex.value}`] = data.data.pageTotal || 0;
    if (
      tabData.value[`${tabIndex.value}`].length >=
        totalList.value[`${tabIndex.value}`] &&
      totalList.value[`${tabIndex.value}`] > 0
    ) {
      loadMoreStatusList.value[`${tabIndex.value}`] = "no-more";
    } else {
      loadMoreStatusList.value[`${tabIndex.value}`] = "";
    }
    tabs.value[0].count = data.data.noAnswerTotal || 0;
    tabs.value[1].count = data.data.inquiryNoAnswerTotal || 0;
    tabs.value[2].count = data.data.repliedTotal || 0;
    tabs.value[3].count = data.data.completedTotal || 0;
    if (data.data.noAnswerTotal >= 0) {
      tabs.value[0].name = `未回复(${data.data.noAnswerTotal || 0})`;
    }
    if (data.data.inquiryNoAnswerTotal >= 0) {
      tabs.value[1].name = `追问未回复(${data.data.inquiryNoAnswerTotal || 0})`;
    }
    if (data.data.repliedTotal >= 0) {
      tabs.value[2].name = `已回复(${data.data.repliedTotal || 0})`;
    }
    if (data.data.completedTotal >= 0) {
      tabs.value[3].name = `已完成(${data.data.completedTotal || 0})`;
    }
  } else {
    tabData.value[`${tabIndex.value}`] = [];
  }

  // nextTick(() => {
  //   getCurrentSwiperItemHeight(tabIndex.value);
  // });
};

// 加载更多数据
const handlerReachBottom = () => {
  if (
    tabData.value[`${tabIndex.value}`].length <
    totalList.value[`${tabIndex.value}`]
  ) {
    // 可以继续加载更多
    loadMoreStatusList.value[`${tabIndex.value}`] = "loading";
    getList(pagesList.value[tabIndex.value] + 1);
  }
};

const handlerScroll = (scrollTop: Number) => {
  scrollTopList.value[tabIndex.value] = scrollTop;
};

// 刷新页面
const handlerRefresh = () => {
  timer.value = setTimeout(() => {
    pagesList.value[tabIndex.value] = 1;
    getList(1);
  }, 100);
};

onUnmounted(() => {
  if (timer.value) {
    clearTimeout(timer.value);
  }
});
</script>

<style lang="scss" scoped>
.topTab {
  height: 52px;
  background: #f7f7f7;
}

// .swiper {
//   // height: 100vh;
// }
.recordContent {
  background: #ffffff;
  width: calc(100%);
  border-radius: 16rpx 16rpx 0px 0px;
}
</style>
